<template>
  <u-navbar :is-back="isBack" back-icon-color="#ffffff" :background="{backgroundColor: '#2D71FD'}" :height="44">
    <view class="slot-wrap" :style="{ 'padding': isBack ? '0' : '0 28rpx' }" @click="handleClick">
      <text class="iconfont">&#xe699;</text>
      <view class="slot-title">{{ shopName }}</view>
      <text class="area">{{ workbench }}工作台</text>
    </view>
  </u-navbar>
</template>

<script>
import store from '@/store'
import { isEmpty } from "@/utils/util"

export default {
  props: {
    isBack: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    store() {
      return store.getters.store
    },
    counter() {
      return store.getters.counter
    },
    businessType() {
      return store.getters.businessType
    },
    workbench() {
      switch (this.businessType) {
        case 0 : return '总部'
        case 1 : return '门店'
        case 2 : return '店铺'
      }
    },
    shopName() {
      return !isEmpty(this.counter) ? this.counter.storeName : this.store.shopName
    }
  },
  methods: {
    handleClick() {
      if (!this.$checkModule('ly_home_store_change')) return this.$toast('未开通切换权限')
      this.$navTo('pages/store/index')
    }
  }
}
</script>

<style lang="scss" scoped>
.slot-wrap {
  font-size: 34rpx;
  color: #FFFFFF;
  display: flex;
  align-items: center;

  .iconfont {
    font-size: 40rpx;
    padding-top: 4rpx;
  }

  .slot-title {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    max-width: 220rpx;
    text-overflow: ellipsis;
  }

  .area {
    border-radius: 8rpx;
    background: var(--ffffff-15, #ffffff26);
    color: #fff;
    font-size: 20rpx;
    margin: 6rpx 0 0 16rpx;
    padding: 4rpx 8rpx;
  }
}
</style>
